<template>
  <div class="ele-body">
    <div class="bg-fff">
      <a-form
        :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="24" :sm="24" :xs="24">
            <div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">零售单详情</span>
                </div>
                <table cellpadding="0" cellspacing="0" class="recepit_table2">
                  <tbody>
                    <tr>
                      <td class="tit">销售单号</td>
                      <td>{{ info.order_sn || '' }}</td>
                      <td class="tit">创建时间</td>
                      <td>{{ info.create_time || '' }}</td>
                      <td class="tit">来源</td>
                      <td>{{ info.store_name || '' }}</td>
                    </tr>
                    <tr>
						<td class="tit">销售日期</td>
						<td>{{ info.sales_time || '' }}</td>
                      <td class="tit">收银员</td>
                      <td>{{ info.make_user_name || '' }}</td>
                      <td class="tit">支付方式</td>
                      <td>{{ info.pay_type_name || '' }}</td>
                    </tr>
                    <tr>
						<td class="tit">消费动机</td>
						<td>{{ info.motive_name || '' }} </td>
                      <td class="tit">会员昵称</td>
                      <td>{{ info.nickname || '' }}</td>
                      <td class="tit">会员手机</td>
                      <td>{{ info.mobile || '' }} </td>
                    </tr>
                    <tr>
						<td class="tit">客户来源</td>
						<td>{{ info.from_name || '' }}</td>
                      <td class="tit">主销导购</td>
                      <td>{{ info.main_salesman_name || '' }}</td>
                      <td class="tit">辅销导购</td>
                      <td>{{ info.make_user_name || '' }} </td>
                    </tr>
                    <tr>
						<td class="tit">销售班组</td>
						<td>{{ info.salesman_team_name || '' }}</td>
                      <td class="tit">备注</td>
                      <td colspan="3">{{ info.note || '' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">首饰销售</span>
                </div>
                <vxe-table
                  border
                  ref="xTable"
                  align="center"
                  :data="goods_list"
                >
                  <vxe-column field="info" title="货品信息" fixed="left">
                    <template #default="{ row }">
                      <div>{{ row.bar_code }}</div>
                      <div class="margin-top-6">{{ row.name }}</div>
                    </template>
                  </vxe-column>
                  <vxe-column field="gold_weight" title="净金重(g)" />
                  <vxe-column field="sales_gold_price" title="销售金价" />
                  <vxe-column field="sales_labor" title="销售工费" />
                  <vxe-column field="num" title="数量" />
                  <vxe-column field="sticker_price" title="标签价" />
                  <vxe-column field="pay_amount" title="原售价" />
                  <vxe-column field="coupon_amount" title="卡劵抵扣金额" />
                  <vxe-column field="real_discount" title="实售折扣(%)" />
                  <vxe-column field="real_amount" title="实售价" />
                  <vxe-column field="sales" title="销售标记" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">饰品销售</span>
                </div>
                <vxe-table
                  border
                  ref="xTable"
                  align="center"
                  :data="ornament_list"
                >
                  <vxe-column field="info" title="货品信息" fixed="left">
                    <template #default="{ row }">
                      <div>{{ row.bar_code }}</div>
                      <div class="margin-top-6">{{ row.name }}</div>
                    </template>
                  </vxe-column>
                  <vxe-column field="gold_weight" title="净金重(g)" />
                  <vxe-column field="sales_gold_price" title="销售金价" />
                  <vxe-column field="sales_labor" title="销售工费" />
                  <vxe-column field="num" title="数量" />
                  <vxe-column field="sticker_price" title="标签价" />
                  <vxe-column field="pay_amount" title="原售价" />
                  <vxe-column field="coupon_amount" title="卡劵抵扣金额" />
                  <vxe-column field="real_discount" title="实售折扣(%)" />
                  <vxe-column field="real_amount" title="实售价" />
                  <vxe-column field="sales" title="销售标记" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">新品换购</span>
                </div>
                <vxe-table
                  border
                  ref="xTable"
                  align="center"
                  :data="new_exchange_list"
                >
                  <vxe-column
                    field="info"
                    title="货品信息"
                    width="150"
                    fixed="left"
                  >
                    <template #default="{ row }">
                      <div>{{ row.bar_code }}</div>
                      <div class="margin-top-6">{{ row.name }}</div>
                    </template>
                  </vxe-column>
                  <vxe-column field="gold_weight" title="净金重(g)" />
                  <vxe-column field="piece_weight" title="货重(g)" />
                  <vxe-column field="num" title="数量" />
                  <vxe-column field="sticker_price" title="标签价" />
                  <vxe-column field="real_amount" title="实售价" />
                  <vxe-column field="exchange_gold_price" title="换购金价" />
                  <vxe-column field="exchange_labour" title="换购工费" />
                  <vxe-column field="discount_amount" title="抵扣金额" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">旧货换购</span>
                </div>
                <vxe-table
                  border
                  ref="xTable"
                  align="center"
                  :data="junk_exchange_list"
                >
                  <vxe-column field="info" title="货品信息" fixed="left">
                    <template #default="{ row }">
                      <div>{{ row.bar_code }}</div>
                      <div class="margin-top-6">{{ row.name }}</div>
                    </template>
                  </vxe-column>
                  <vxe-column field="gold_weight_old" title="原金重(g)" />
                  <vxe-column field="gold_weight" title="现金重(g)" />
                  <vxe-column field="piece_weight" title="货重(g)" />
                  <vxe-column field="num" title="数量" />
                  <vxe-column field="exchange_gold_price" title="换购金价" />
                  <vxe-column field="exchange_labour" title="换购工费" />
                  <vxe-column field="discount_amount" title="抵扣金额" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">旧货回收</span>
                </div>
                <vxe-table
                  border
                  ref="xTable"
                  align="center"
                  :data="junk_recovery_list"
                >
                  <vxe-column
                    field="info"
                    title="货品信息"
                    width="150"
                    fixed="left"
                  >
                    <template #default="{ row }">
                      <div>{{ row.bar_code }}</div>
                      <div class="margin-top-6">{{ row.name }}</div>
                    </template>
                  </vxe-column>
                  <vxe-column field="gold_weight_old" title="原金重(g)" />
                  <vxe-column field="gold_weight" title="现金重(g)" />
                  <vxe-column field="piece_weight" title="货重(g)" />
                  <vxe-column field="num" title="数量" />
                  <vxe-column field="exchange_gold_price" title="回收金价" />
                  <vxe-column field="exchange_labour" title="回收工费" />
                  <vxe-column field="pay_amount" title="回收金额" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">赠品列表</span>
                </div>
                <vxe-table border ref="xTable" align="center" :data="gift_list">
                  <vxe-column field="info" title="货品信息" fixed="left">
                    <template #default="{ row }">
                      <div>{{ row.bar_code }}</div>
                      <div class="margin-top-6">{{ row.name }}</div>
                    </template>
                  </vxe-column>
                  <vxe-column field="gold_weight" title="赠品小类" />
                  <vxe-column field="sales_gold_price" title="品牌" />
                  <vxe-column field="sales_labor" title="赠品类型" />
                  <vxe-column field="num" width="100" title="赠品数量" />
                  <vxe-column field="sticker_price" title="抵扣积分" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <vxe-table
                  border
                  ref="xTable"
                  align="center"
                  :showHeader="false"
                  :data="[info]"
                >
                  <vxe-column field="create_time" title="money">
                    <template #default="{ row }">
                      <div>收款金额：{{ row.pay_amount || 0 }}</div>
                      <div class="margin-top-6">
                        <span class="margin-right-15"
                          >新品金额：{{ row.new_amount || 0 }}</span
                        >
                        <span class=""
                          >旧货抵扣：{{ row.exchange_discount || 0 }}</span
                        >
                      </div>
                    </template>
                  </vxe-column>
                  <vxe-column field="pay_type_name" title="num" />
                </vxe-table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">修改记录</span>
                </div>
                <vxe-table border ref="xTable" align="center" :data="log">
                  <vxe-column field="create_time" title="时间" fixed="left" />
                  <vxe-column field="user_name" title="操作人" />
                  <vxe-column field="subject_name" title="修改项目" />
                  <vxe-column field="before" title="修改前" />
                  <vxe-column field="after" title="修改后" />
                </vxe-table>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { finishPageTab, reloadPageTab } from '@/utils/page-tab-util';
  import { get_sales_manage_detail } from '@/api/order/sales_manage';
  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const loading = ref(false);
  const info = ref({});
  const goods_list = ref([]);
  const ornament_list = ref([]);
  const new_exchange_list = ref([]);
  const junk_exchange_list = ref([]);
  const junk_recovery_list = ref([]);
  const gift_list = ref([]);
  const log = ref([]);

  onMounted(() => {
    if (query.order_sn) {
      get_sales_manage_detail({ order_sn: query.order_sn }).then((res) => {
        info.value = res.order;
        goods_list.value = res.item.goods_list;
        ornament_list.value = res.item.ornament_list;
        new_exchange_list.value = res.item.new_exchange_list;
        junk_exchange_list.value = res.item.junk_exchange_list;
        junk_recovery_list.value = res.item.junk_recovery_list;
        gift_list.value = res.item.gift_list;
        log.value = res.log;
      });
    }
  });
</script>

<style lang="less" scoped></style>
